<!doctype html>
<html class="no-js " lang="CN">
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">
<title>用户界面</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Favicon-->
<link rel="stylesheet" href="/managesystem/static/assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/managesystem/static/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.css"/>
<link rel="stylesheet" href="/managesystem/static/assets/plugins/morrisjs/morris.min.css" />
<link rel="stylesheet" href="/managesystem/static/assets/css/main.css">
<link rel="stylesheet" href="/managesystem/static/assets/css/color_skins.css">
<link rel="stylesheet" href="/managesystem/layui/css/layui.css">
    <style>
        .arrearage_Query,.park_Query,.repairs_Query{
            display: none;
        }
    </style>
</head>
<body class="theme-purple">
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img class="zmdi-hc-spin" src="/managesystem/static/assets/images/logo.svg" width="48" height="48" alt="Oreo"></div>
        <p>Please wait...</p>
    </div>
</div>
<!-- Overlay For Sidebars -->
<div class="overlay"></div>

<!-- Top Bar -->
<nav class="navbar p-l-5 p-r-5" style="height: 60px">
    <ul class="nav navbar-nav navbar-left">
        <li>
            <div class="navbar-header">
                <a href="javascript:void(0);" class="bars"></a>
                <a class="navbar-brand" href="index.html" style="margin-top: 15px;"><img src="/managesystem/static/assets/images/logo.svg" width="30" alt="Oreo"><span class="m-l-10">业主信息界面</span></a>
            </div>
        </li>
        <li>
            <ul class="dropdown-menu pullDown">
                <li class="body">
                    <ul class="menu list-unstyled">
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/managesystem/static/assets/images/xs/avatar2.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Sophia <span class="time">30min ago</span></span>
                                        <span class="message">There are many variations of passages</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/managesystem/static/assets/images/xs/avatar3.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Sophia <span class="time">31min ago</span></span>
                                        <span class="message">There are many variations of passages of Lorem Ipsum</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/managesystem/static/assets/images/xs/avatar4.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Isabella <span class="time">35min ago</span></span>
                                        <span class="message">There are many variations of passages</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/managesystem/static/assets/images/xs/avatar5.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Alexander <span class="time">35min ago</span></span>
                                        <span class="message">Contrary to popular belief, Lorem Ipsum random</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/managesystem/static/assets/images/xs/avatar6.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Grayson <span class="time">1hr ago</span></span>
                                        <span class="message">There are many variations of passages</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="footer"> <a href="javascript:void(0);">View All</a> </li>
            </ul>
        </li>
    </ul>
</nav>

<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#dashboard"><i class="zmdi zmdi-home m-r-5"></i>Oreo</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#user"><i class="zmdi zmdi-account m-r-5"></i>1234</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane stretchRight active" id="dashboard">
            <div class="menu">
                <ul class="list">
                    <li>
                        <div class="user-info">
                            <div class="image"><a href="#"><img src="/managesystem/static/assets/images/profile_av.jpg" alt="User"></a></div>
                            <div class="detail">
                                <h4 class="user_Name">1234</h4>
                                <small>XX小区业主</small>
                            </div>
                            <a title="facebook" href="#"><i class="zmdi zmdi-facebook"></i></a>
                            <a title="twitter" href="#"><i class="zmdi zmdi-twitter"></i></a>
                            <a title="instagram" href="#"><i class="zmdi zmdi-instagram"></i></a>
                        </div>
                    </li>
                    <li class="header">主菜单</li>
                    <li class="active open"> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-home"></i><span>信息查询</span></a>
                        <ul class="ml-menu">
                            <li class="active Arrears_Q"><a href="#">欠费信息</a> </li>
                            <li class="park_Q"><a href="#">停车信息</a></li>
                            <li class="repairs_Q"><a href="#">设备维护信息</a></li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-apps"></i><span>在线缴费</span> </a>
                        <ul class="ml-menu">
                            <li><a href="#">缴纳水电费</a></li>
                            <li><a href="#">物业管理费</a></li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-shopping-cart"></i><span>在线报修</span> </a>
                        <ul class="ml-menu">
                            <li> <a href="#">登记报修详情</a></li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-swap-alt"></i><span>在线投诉</span> </a>
                        <ul class="ml-menu">
                            <li> <a href="#">登记投诉意见</a> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</aside>

<!-- Main Content -->
<section class="content home">
    <div class="block-header">
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-12">
                <h2 style="color: #fff;">1234</h2>
                <small style="color: #fff;">欢迎使用XX小区物业管理信息系统</small>
            </div>
        </div>
    </div>
    <div class="card weather">
        <div class="header">
            <h2><strong>天气</strong></h2>
        </div>
        <div class="body">
            <div class="city">
                <span>晴空万里</span>
                <h3 class="city_Name"></h3>
                <img src="/managesystem/static/assets/images/weather/summer.svg" alt="">
            </div>
            <ul class="row days list-unstyled m-b-0">
                <li>
                    <h5>周一</h5>
                    <img src="/managesystem/static/assets/images/weather/sky.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周二</h5>
                    <img src="/managesystem/static/assets/images/weather/rain.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周三</h5>
                    <img src="/managesystem/static/assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周四</h5>
                    <img src="/managesystem/static/assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周五</h5>
                    <img src="/managesystem/static/assets/images/weather/cloudy.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周六</h5>
                    <img src="/managesystem/static/assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周日</h5>
                    <img src="/managesystem/static/assets/images/weather/cloudy.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row clearfix arrearage_Query">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>欠费查询</strong> <small>了解您的欠费情况</small> </h2>
                    </div>
                    <div class="body table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>FIRST NAME</th>
                                <th>LAST NAME</th>
                                <th>USERNAME</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Larry</td>
                                <td>Jellybean</td>
                                <td>@lajelly</td>
                            </tr>
                            <tr>
                                <th scope="row">5</th>
                                <td>Larry</td>
                                <td>Kikat</td>
                                <td>@lakitkat</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix park_Query">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>停车信息</strong> <small>了解您的停车信息，实时关注自己的爱车</small> </h2>
                    </div>
                    <div class="body table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>FIRST NAME</th>
                                <th>LAST NAME</th>
                                <th>USERNAME</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Larry</td>
                                <td>Jellybean</td>
                                <td>@lajelly</td>
                            </tr>
                            <tr>
                                <th scope="row">5</th>
                                <td>Larry</td>
                                <td>Kikat</td>
                                <td>@lakitkat</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix repairs_Query">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>设备维护进度查询</strong> <small>实时关注自己报修设备的维修进度</small> </h2>
                    </div>
                    <div class="body table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>FIRST NAME</th>
                                <th>LAST NAME</th>
                                <th>USERNAME</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Larry</td>
                                <td>Jellybean</td>
                                <td>@lajelly</td>
                            </tr>
                            <tr>
                                <th scope="row">5</th>
                                <td>Larry</td>
                                <td>Kikat</td>
                                <td>@lakitkat</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Jquery Core Js -->
<script src="/managesystem/static/assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js ( jquery.v3.2.1, Bootstrap4 js) -->
<script src="/managesystem/static/assets/js/home.js"></script>
<script src="/managesystem/static/assets/js/login.js"></script>
<script src="/managesystem/static/assets/bundles/vendorscripts.bundle.js"></script> <!-- slimscroll, waves Scripts Plugin Js -->

<script src="/managesystem/static/assets/bundles/mainscripts.bundle.js"></script>
<script src="/managesystem/layui/layui.js"></script>
<!--<script src="assets/js/pages/index.js"></script>-->
<script type="text/javascript">
var laydate //日期
,laypage //分页
,layer //弹层
,table //表格
,carousel //轮播
,element; //元素操作
$(function(){
	layui.config({
		  version: '1522709297490' //为了更新 js 缓存，可忽略
		});
		 
		layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
		  laydate = layui.laydate ;//日期
		  laypage = layui.laypage ;//分页
		  layer = layui.layer ;//弹层
		  table = layui.table ;//表格
		  carousel = layui.carousel; //轮播
		  element = layui.element; //元素操作
		  
		  //向世界问个好
		  layer.msg('Hello World');
		  
		 
		  
		  //执行一个 table 实例
		  table.render({
		    elem: '#test'
		    ,height: 332
		    ,url: '/managesystem/userGuarantee/selectUserGuaranteeList' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'guarantee_id', title: 'ID', width:80, sort: true, fixed: 'left'}
		      ,{field: 'guaranteeDesc', title: '用户名', width:80}
		      ,{field: 'userName', title: '性别', width:80, sort: true}
		      ,{field: 'guaranteeState', title: '城市', width:80} 
		    ]]
		  });
		  function msg(){
			  layer.msg('Hello World');
				
			}
});
});	
function msg(){
	layer.msg('Hello World');
		alert();
	}
</script>
</body>
</html>s